<template>
  <div class="view">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="组织" name="first">
        <div class="content">
          <div class="left">
            <div class="name">{{ teamDetail.name }}</div>
            <div class="detail">
              <div class="label">所属上级：<span>dadassd</span></div>
              <div class="label">所属上级：<span>dadassd</span></div>
              <div class="label">所属上级：<span>dadassd</span></div>
              <div class="label">所属上级：<span>dadassd</span></div>
              <div class="label">所属上级：<span>dadassd</span></div>
            </div>
          </div>
          <div class="right">操作</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="用户" name="second">用户</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import { getTeamDetail } from '@/api/team'
export default {
  name: 'Organization',
  props: {
    teamDetail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      activeName: 'first'
    }
  },
  computed: {

  },
  watch: {
    teamDetail: function(value) {
      this.teamDetail = value
      console.log(value)
    }
  },
  mounted() {

  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
    // async detail() {
    //   const id = this.teamDetail.id
    //   const res = await getTeamDetail(id)
    //   if (res.code === 200) {

    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.view{
  margin-top: 14px;
  .content{
    display: flex;
    .left{
      flex: 1;
      .name{
        font-size:20px;
        font-weight:500;
        color:rgba(247,181,0,1);
        margin-top: 25px;
      }
      .detail{
        .label{
          margin-top: 15px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(247,181,0,1);
          span{
            font-size:14px;
            font-weight:400;
            color:rgba(255,255,255,0.65);
          }
        }
      }
    }
  }
}
</style>
